import { DeleteOutlined } from "@ant-design/icons"
import { Button, ButtonProps } from "antd/es"
import React from "react"

import useConfirm from "@/components/common/confirmModal"
import { Toast } from "@/components/messages"
import { usePermission } from "@/hooks"
import { useLocale } from "@/locales"

interface ButtonDeleteRiskProps {
	titleModalDelete: string | React.ReactNode
	onDelete: Function
	numberPermission: string
	loading?: boolean
}

const ButtonDeleteRisk = ({
	titleModalDelete,
	onDelete,
	numberPermission,
	loading = false,
	...otherProps
}: ButtonDeleteRiskProps & ButtonProps) => {
	const { confirm, contextHolder } = useConfirm()
	const { newFormat } = useLocale()

	const openConfirmModal = async () => {
		const ret = await confirm({ title: titleModalDelete })

		if (ret) {
			onDelete()
			Toast.info(newFormat("common.delete_success"))
		}
	}

	const havePermissionAction = usePermission(numberPermission)

	return (
		<div>
			{contextHolder}
			{havePermissionAction && (
				<Button
					{...otherProps}
					size="small"
					type="primary"
					danger
					onClick={openConfirmModal}
					icon={<DeleteOutlined />}
					loading={loading}
				>
					{newFormat("common.delete")}
				</Button>
			)}
		</div>
	)
}

export default ButtonDeleteRisk
